<template>
  <div>
    <div class="mui-card">
      <div class="mui-card-header">
        <span>刘艹艹</span>
        <span>已确认</span>
      </div>
      <div class="mui-card-content">
        <div class="mui-card-content-inner">
          <ul>
            <li>
              <span class="name">申请编号</span>
              <span class="values">:111</span>
            </li>
            <li>
              <span class="name">管理所</span>
              <span class="values">:高新所</span>
            </li>
            <li>
              <span class="name">站点</span>
              <span class="values">:河北大唐国际张家口热电有限责任公司</span>
            </li>
            <li>
              <span class="name">机组</span>
              <span class="values">:1</span>
            </li>
            <li>
              <span class="name">申请时间</span>
              <span class="values">:2019年4月4日13:23:26</span>
            </li>
            <li>
              <span class="name">联系时间</span>
              <span class="values">:2019年4月4日13:23:26</span>
            </li>
          </ul>

          <div class="thumbs">
            <vue-preview :slides="slide1"></vue-preview>
          </div>

          <div class="problem">
            <h2>问题描述：</h2>
            <p>可以在折叠面板中放置任何内容；折叠面板默认收缩，若希望某个面板默认展开，只需要在包含.mui-collapse类的li节点上，增加.mui-active类即可；mui官网中的方法说明，使用的就是折叠面板控件。</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      slide1: [
        {
          src:
            "https://farm6.staticflickr.com/5591/15008867125_68a8ed88cc_b.jpg",
          msrc:
            "https://farm6.staticflickr.com/5591/15008867125_68a8ed88cc_m.jpg",
          alt: "picture1",
          title: "维保配图1",
          w: 600,
          h: 400
        },
        {
          src:
            "https://farm4.staticflickr.com/3902/14985871946_86abb8c56f_b.jpg",
          msrc:
            "https://farm4.staticflickr.com/3902/14985871946_86abb8c56f_m.jpg",
          alt: "picture2",
          title: "维保配图2",
          w: 1200,
          h: 900
        },
        {
          src:
            "https://farm6.staticflickr.com/5591/15008867125_68a8ed88cc_b.jpg",
          msrc:
            "https://farm6.staticflickr.com/5591/15008867125_68a8ed88cc_m.jpg",
          alt: "picture1",
          title: "维保配图1",
          w: 600,
          h: 400
        }
      ]
    };
  }
};
</script>
<style lang="scss">
.mui-card {
  margin: 0.1rem 0;
  border-radius: 0.05rem;
  border: 1px solid #7f8fc3;
  .mui-card-header {
    display: flex;
    justify-content: space-between;
    font-size: 0.16rem;
    padding: 0.2rem;
    color: #fff;
    background: #7f8fc3;
  }
  .mui-card-content-inner {
    padding: 0.1rem 0.08rem;

    ul {
      padding: 0;
      margin: 0;
      li {
        text-align: left;
        list-style: none;
        width: 100%;
        overflow: hidden;
        margin-bottom: 0.1rem;
        font-size: 0.15rem;
        color: #000;
        span {
          float: left;
        }
        .name {
          width: 20%;
          text-align: justify;
          text-align-last: justify;
        }
        .values {
          padding-left: 0.1rem;
          width: 80%;
          box-sizing: border-box;
        }
      }
    }
    .problem {
      text-align: left;
      h2 {
        font-weight: normal;
        padding: 0.1rem 0;
        font-size: 0.16rem;
        color: #000;
      }
      p {
        line-height: 2em;
        font-size: 0.14rem;
        color: #000;
        margin-bottom: 0px;
      }
    }
  }
  .mui-card-footer {
    justify-content: flex-end;
    button {
      padding: 0.06rem 0.2rem;
      margin-left: 0.1rem;
      border-radius: 0.15rem;
    }
    .mui-btn-primary {
      background: #7f8fc3;
      border-color: #7f8fc3;
      color: #fff;
    }
  }
}
</style>